<template>
  <!-- 评论内容 -->
  <div class="cmtBox">
    <ul>
      <li>
        <!-- 评论用户 信息-->
        <div class="cmtUser">
          <!-- 头像 -->
          <div class="uIcon">
            <img src="../../state/img/login01.jpg" alt="" />
          </div>
          <!-- 用户名称信息 -->
          <div class="Uinfo">
            <!-- 用户名 -->
            <span class="Uname">梅洋</span>
            <!-- 评论时间  -->

            <span class="cmtInfo">2022-01-01</span>
          </div>
        </div>
        <!-- 评论内容 -->
        <p>嗷嗷嗷啊啊</p>
        <button>回复</button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'ComtContent',
  };
</script>

<style lang="less" scoped>
  // 评论内容
  .cmtBox {
    width: 100%;
    margin-top: 15px;
    ul {
      li {
        position: relative;
        //  用户信息
        .cmtUser {
          display: flex;
          align-items: center;
          height: 50px;
          // 头像
          .uIcon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            overflow: hidden;
            img {
              height: 100%;
            }
          }
          //  用户名等信息
          .Uinfo {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 6px;
            .Uname {
              font-size: 14px;
              font-weight: 600;
              color: #fb6c28;
              cursor: pointer;
            }
            // 评论时间 回复按钮

            // 评论时间
            .cmtInfo {
              font-size: 12px;
              color: #657786;
            }
          }
        }
        p {
          margin-left: 50px;
          padding: 10px;
          font-size: 14px;
          color: #63686d;
          background-color: #f5f5f5;
          border-radius: 8px;
        }
        button {
          position: absolute;
          display: none;
          top: 20px;
          right: 15px;
          width: 36px;
          height: 20px;
          color: #fff;
          background-color: #fb6c28;
          border-radius: 6px;
        }
        &:hover {
          button {
            display: block;
          }
        }
      }
    }
  }
</style>
